import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Star, Tag, Filter, MapPin } from 'lucide-react';
export function Camping() {
  const featuredGear = [{
    id: 'big-agnes-copper-spur',
    name: 'Big Agnes Copper Spur HV UL2',
    category: 'Tents',
    rating: 4.8,
    price: '$499.95',
    image: 'https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'therm-a-rest-neoair',
    name: 'Therm-a-Rest NeoAir XTherm',
    category: 'Sleeping Pads',
    rating: 4.9,
    price: '$219.95',
    image: 'https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'western-mountaineering-alpinlite',
    name: 'Western Mountaineering AlpinLite',
    category: 'Sleeping Bags',
    rating: 4.9,
    price: '$585',
    image: 'https://images.unsplash.com/photo-1508873535684-277a3cbcc4e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'jetboil-minimo',
    name: 'Jetboil MiniMo Cooking System',
    category: 'Stoves',
    rating: 4.7,
    price: '$149.95',
    image: 'https://images.unsplash.com/photo-1510672981848-a1c4f1cb5ccf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'benchmade-bugout',
    name: 'Benchmade Bugout 535',
    category: 'Knives',
    rating: 4.8,
    price: '$170',
    image: 'https://images.unsplash.com/photo-1590155733074-5a9e8f3a1b1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'katadyn-befree',
    name: 'Katadyn BeFree 1.0L',
    category: 'Water Filters',
    rating: 4.7,
    price: '$44.95',
    image: 'https://images.unsplash.com/photo-1523362289600-a70b4a0e09aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }];
  const campingAreas = [{
    id: 'yellowstone',
    name: 'Yellowstone National Park',
    location: 'Wyoming, USA',
    image: 'https://images.unsplash.com/photo-1533423997433-a5137435b311?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'banff',
    name: 'Banff National Park',
    location: 'Alberta, Canada',
    image: 'https://images.unsplash.com/photo-1476041800959-2f6bb412c8ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'patagonia',
    name: 'Torres del Paine',
    location: 'Patagonia, Chile',
    image: 'https://images.unsplash.com/photo-1508382640689-34bbf886c3e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }];
  const categories = ['Tents', 'Sleeping Bags', 'Sleeping Pads', 'Cooking', 'Tools', 'Lighting', 'Survival', 'Food & Water'];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <img src="https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Camp & Survive" className="absolute w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-earth-dark to-transparent"></div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            CAMP & SURVIVE
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Shelters, cooking equipment, and survival tools for all your
            overnight adventures
          </p>
        </div>
      </section>
      {/* Category Navigation */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4 overflow-x-auto">
          <div className="flex space-x-4">
            {categories.map(category => <a key={category} href={`#${category.toLowerCase().replace(' ', '-')}`} className="whitespace-nowrap px-4 py-2 rounded-full bg-earth-dark hover:bg-forest-green transition-colors">
                {category}
              </a>)}
          </div>
        </div>
      </section>
      {/* Featured Gear */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              TOP-RATED CAMPING GEAR
            </h2>
            <div className="flex space-x-4">
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-forest-green transition-colors">
                <Filter size={18} />
                <span>Filter</span>
              </button>
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-forest-green transition-colors">
                <Tag size={18} />
                <span>Sort</span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredGear.map(item => <Link key={item.id} to={`/review/${item.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-64 overflow-hidden">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-forest-green px-3 py-1">
                      <span className="font-display text-sm">
                        {item.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center mb-2">
                      <div className="flex text-forest-green">
                        {[...Array(5)].map((_, i) => <Star key={i} size={16} className={i < Math.floor(item.rating) ? 'fill-forest-green' : 'text-gray-600'} />)}
                      </div>
                      <span className="ml-2 text-gray-400">{item.rating}</span>
                    </div>
                    <h3 className="font-display text-xl mb-2 group-hover:text-forest-green transition-colors">
                      {item.name}
                    </h3>
                    <div className="mt-auto flex justify-between items-center">
                      <span className="text-lg font-bold">{item.price}</span>
                      <span className="text-forest-green flex items-center">
                        View Details
                        <ArrowRight size={16} className="ml-1 transition-transform group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          <div className="mt-8 text-center">
            <button className="bg-forest-green hover:opacity-90 text-white font-display px-8 py-3 rounded transition-colors">
              VIEW ALL CAMPING GEAR
            </button>
          </div>
        </div>
      </section>
      {/* Featured Camping Areas */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            ICONIC CAMPING DESTINATIONS
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {campingAreas.map(area => <div key={area.id} className="group relative h-80 overflow-hidden rounded-lg">
                <img src={area.image} alt={area.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="font-display text-2xl text-white mb-1">
                    {area.name}
                  </h3>
                  <div className="flex items-center text-gray-300 mb-4">
                    <MapPin size={16} className="mr-1" />
                    <span>{area.location}</span>
                  </div>
                  <Link to={`/camping-areas/${area.id}`} className="inline-flex items-center text-forest-green">
                    <span className="mr-1">Destination Guide</span>
                    <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                  </Link>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Camping Guides */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              CAMPING GUIDES & RESOURCES
            </h2>
            <Link to="/guides" className="flex items-center text-forest-green hover:opacity-90 transition-colors">
              <span className="mr-2 font-display">VIEW ALL GUIDES</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Link to="/guides/family-camping" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Family Camping Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">14 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-forest-green transition-colors">
                    Family Camping Tent Selection Guide
                  </h3>
                  <p className="text-gray-300">
                    Find the perfect shelter for your family adventures with our
                    comprehensive guide to selecting, setting up, and
                    maintaining family-sized camping tents.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/wilderness-cooking" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1510672981848-a1c4f1cb5ccf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Wilderness Cooking Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">16 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-forest-green transition-colors">
                    Wilderness Cooking: Beyond Freeze-Dried Meals
                  </h3>
                  <p className="text-gray-300">
                    Elevate your backcountry culinary game with techniques,
                    recipes, and gear recommendations for delicious meals in the
                    wild.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/survival-essentials" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1590155733074-5a9e8f3a1b1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Survival Essentials Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">19 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-forest-green transition-colors">
                    Wilderness Survival Essentials: The Ten Systems Approach
                  </h3>
                  <p className="text-gray-300">
                    Master the ten essential systems needed for wilderness
                    survival, from navigation and fire-making to first aid and
                    signaling.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>
    </div>;
}